<template>
  <span>
    <div ref="tagDetail" class="tagDetail">
      <div class="tagDetail-item" @click="addTag">
        <span class="tagDetail-icon xicon-plus-line"></span>
        <span>{{ $i18n('label.portal.new') }}</span>
      </div>
      <div class="tagDetail-item" @click="cancelTag">
        <span class="tagDetail-icon xicon-close"></span>
        <span>{{ $i18n('label.cancel') }}</span>
      </div>
      <div class="tagDetail-line" v-if="this.data.tagList.length" />
      <div>
        <div class="tagDetail-item" :key="item.labelId" v-for="item in this.data.tagList">
          <a-checkbox
            class="tagDetail-item-checkboxWrap"
            @change="(e) => onTagSelect(e.target.checked, item.labelId)"
            :checked="selectTags.includes(item.labelId)">
            <i class="tagDetail-item-icon xicon-tag2" :style="{ color: item.color }"></i>
            <span>{{ item.labelName }}</span>
          </a-checkbox>
        </div>
      </div>
    </div>
  </span>
</template>
<script>
import * as Fiber from 'fiber';
  /* global axios,_ctxPath */
  export default {
    name: 'TagDetail',
    props: {
      data: {}, // 配置的按钮数据
      selectedRows: {}, // 列表选中的数据
      changeTagBtnName: {
        // 修改dropmenu按钮名称
        type: Function
      },
      handleMenuVisible: {
        // 关闭dropmenu的弹窗
        type: Function
      },
      handleModal: {
        // 新增标签的弹窗
        type: Function
      }
    },

    data() {
      return {
        modalVisible: false,
        selectTags: []
      };
    },

    methods: {
      addTag() {
        this.$emit('handleModal');
      },
      cancelTag() {
        if (!this.selectedRows.length) {
          // 用户未勾选列表数据，给出提醒
          Fiber.message.warning(this.$i18n('label.choose.cancel.data'));
          this.$emit('handleMenuVisible', false);
          return;
        }
        // 批量删除标签和协同的关联关系
        const params = {
          affairIds: this.selectedRows.map((v) => v.id).join(',')
        };
        const url = `${_ctxPath}/rest/m3/pending/batchDeleteLabelRelation?option.n_a_s=1`;
        axios.post(url, params).then(() => {
          this.refrehData();
          Fiber.message.success(this.$i18n('label.operate.success'));
        });
      },
      bantchUpdateTags() {
        this.$refs.tagDetail.scrollTop = 0;
        if (!this.selectedRows.length && this.selectTags.length) {
          // 用户未勾选列表数据，但是选择了标签数据，给出提醒
          Fiber.message.warning(this.$i18n('label.choose.add.data'));
        }
        if (this.selectedRows.length && this.selectTags.length) {
          // 批量更新标签
          console.log(this.selectedRows, this.selectTags, 'selectedRows');
          const params = this.selectedRows.map((v) => {
            const labelIds = v.labels ? v.labels.map((v) => v.id) : [];
            return {
              affairId: v.id,
              app: v.applicationCategoryKey,
              labelId: this.computeLabelIds(this.selectTags, labelIds)
            };
          });
          const url = `${_ctxPath}/rest/m3/pending/batchAddLabelRelation?option.n_a_s=1`;
          axios.post(url, params).then(() => {
            this.refrehData();
            Fiber.message.success(this.$i18n('label.operate.success'));
          });
        }
        this.selectTags = [];
      },
      onTagSelect(checked, labelId) {
        let selectTags = [];
        if (checked) {
          selectTags = this.selectTags.includes(labelId)
            ? this.selectTags
            : [...this.selectTags, labelId];
        } else {
          selectTags = this.selectTags.filter((e) => e != labelId);
        }
        this.selectTags = selectTags;
      },
      refrehData() {
        // 刷新表格数据
        this.data.reloadTableData();
      },
      computeLabelIds(newIds, oldIds) {
        if (oldIds.length) {
          const params = Array.from(new Set(oldIds.concat(newIds)));
          return params.join(',');
        } else {
          return newIds.join(',');
        }
      }
    }
  };
</script>

<style lang="scss">
  .tagDetail {
    background-color: #fff;
    padding: 5px 0;
    width: 112px;
    background: #ffffff;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
    border-radius: 2px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    max-height: 440px;
    overflow-y: auto;
    .tagDetail-icon {
      font-size: 12px;
      color: #8c8c8c;
      margin-right: 6px;
    }
    .tagDetail-line {
      height: 1px;
      background-color: #f0f0f0;
    }
    .tagDetail-item:hover {
      background-color: #f5f7fb;
    }
    .tagDetail-item {
      cursor: pointer;
      padding: 0 5px 0 10px;
      height: 30px;
      line-height: 30px;

      &-checkboxWrap {
        display: flex;
        max-width: 100%;
        align-items: center;
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
      }
      &-icon {
        margin-right: 4px;
      }
    }
    .ant-checkbox + span {
      padding-left: 4px;
    }
    .ant-checkbox-inner {
      width: 16px;
      height: 16px;
    }
  }
</style>
